<template>
	<view>
		<view class="header-bg">
			<view class="header">基本使用示例</view>
		</view>
		<view style="padding: 30rpx;" v-for="(v,i) in data" :key="'data_'+i">{{v}}</view>
		<!-- #ifndef MP-WEIXIN -->
		<view v-for="(item,index) in files.values()" :key="'file_'+index">
			<image style="width: 100rpx;height: 100rpx;" :src="item.path" mode="widthFix"></image>
			<text>{{ item.name }}</text>
			<text style="margin-left: 10rpx;">大小：{{ item.size }}</text>
			<text style="margin-left: 10rpx;">状态：{{ item.type }}</text>
			<text style="margin-left: 10rpx;">进度：{{ item.progress }}</text>
			<text v-if="item.responseText" style="margin-left: 10rpx;">服务端数据：{{ item.responseText }}</text>
			<text style="margin-left: 10rpx;padding: 0 10rpx;border: 1rpx solid #007AFF;" @click="clear(item.name)">删除</text>
		</view>
		<!-- #endif -->
		
		<!-- #ifdef MP-WEIXIN -->
		<view v-for="(item,index) in wxFiles" :key="'file_'+index">
			<text>{{ item.name }}</text>
			<text style="margin-left: 10rpx;">大小：{{ item.size }}</text>
			<text style="margin-left: 10rpx;">状态：{{ item.type }}</text>
			<text style="margin-left: 10rpx;">进度：{{ item.progress }}</text>
			<view>
				<button @click="clear(item.name)">删除</button>
			</view>
		</view>
		<!-- #endif -->
		
		<lsj-upload 
		ref="lsjUploadRef"
		debug
		:width="width"
		:height="height"
		:option="option"
		:toBase="toBase"
		@changeFile="onChange"
		@progress="onprogress"
		@uploadEnd="onuploadEnd"
		>
			<view style="background-color: #007AFF;" :style="{width: width,height: height}">自定义选择按钮</view>
		</lsj-upload>
		<view class="bottom-btn flex">
			<button @click="add">在按钮上方添加数据</button>
			<button @click="onsetFiles">setFiles同步文件</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: ['DOM重排演示'],
				option: {
					// 上传服务器地址，该地址非真实路径，需替换为你项目自己的接口地址
					url: 'http://hl.jw.com/dropbox/document/upload',
					// 上传附件的key
					name: 'file',
					// 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
					header: {
						// 传文件流时无需设置Content-Type
						// 'Content-Type': 'application/json',
						// 示例参数可删除
						'Authorization': 'bearer aa',
						'uid': '27',
						'accountid': '27'
					},
					// 根据你接口需求自定义body参数
					formData: { 
						'orderId': 1000,
						'test': '汉字参数测试'
					}
				},
				width: '180rpx',
				height: '180rpx',
				toBase: false,
				// 文件回显列表
				files: new Map(),
			}
		},
		onReady() {
			// 模拟异步请求数据并在按钮上方渲染
			setTimeout(()=> {
				this.add();
			},2000)
		},
		methods: {
			onsetFiles() {
				let files1 = [{name: '测试文件名称.png'},{name: '测试文件名称2.png',}];
				let files2 = new Map();
				files2.set('测试文件名称.png',{name: '测试文件名称.png'});
				this.$refs.lsjUploadRef.setFiles(files2)
			},
			add() {
				this.data.push('在按钮上方动态添加了数据，此时需要调用组件的show刷新透明层top');
				this.$nextTick(()=> {
					uni.$emit('$upload-show',{});
				})
			},
			// 移除某个文件
			clear(name) {
				// name=指定文件名，不传name默认移除所有文件
				this.$refs.lsjUploadRef.clear(name);
			},
			// 某文件上传结束回调(成功失败都回调)
			onuploadEnd(item,childId) {
				console.log(`${item.name}已上传结束，上传状态=${item.type}`);
				// 更新当前窗口状态变化的文件
				this.files.set(item.name,item);
				
				// ---可删除--演示上传完成后取服务端数据
				if (item['responseText']) {
					console.log('演示服务器返回的字符串JSON转Object对象');
					this.files.get(item.name).responseText = JSON.parse(item.responseText);
				}
				
				// 微信小程序Map对象for循环不显示，所以转成普通数组，
				// 如果你用不惯Map对象，也可以像这样转普通数组，组件使用Map主要是避免反复文件去重操作
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()];
				// #endif
				
				// 强制更新视图
				this.$forceUpdate();
				
				
				// ---可删除--演示判断是否所有文件均已上传成功
				let isAll = [...this.files.values()].find(item=>item.type!=='success');
				if (!isAll) {
					console.log('已全部上传完毕');
				}
				else {
					console.log(isAll.name+'待上传');
				}
				
			},
			// 上传进度回调
			onprogress(item,childId) {
				// 更新当前状态变化的文件
				this.files.set(item.name,item);
				
				// 微信小程序Map对象for循环不显示，所以转成普通数组
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()];
				// #endif
				
				// 强制更新视图
				this.$forceUpdate();
				
			},
			// 文件选择回调
			onChange(files,childId) {
				console.log('已选择的文件Map',JSON.stringify([...files]));
				// 更新选择的文件 
				this.files = files;
				// 强制更新视图
				this.$forceUpdate();
				
				// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()]; 
				// #endif
				
				// ---可删除--演示重新定位覆盖层控件
				this.$nextTick(()=>{
					console.log('演示重新定位 (提示：像示例里文件列表在按钮上方时就需要插入文件后更新webview位置)');
					// 直接更新当前页面所有上传组件webview位置
					uni.$emit('$upload-show',{});
				});
				
			}
		}
	}
</script>

<style>

</style>
